import {
  Card,
  Form,
  Grid,
  DatePicker,
  Select,
  Space,
  Button,
  Table,
  Modal,
  InputNumber,
  Divider,
  Upload,
} from "@arco-design/web-react";
import {
  IconDownload,
  IconPlus,
  IconRefresh,
} from "@arco-design/web-react/icon";
import { IconSearch } from "@arco-design/web-react/icon";
import { useState } from "react";
const { Row, Col } = Grid;
const { RangePicker } = DatePicker;
type AddFormType = {
  date: string;
  water: number;
  electricity: number;
  gas: number;
};
type QueryFormType = {
  date: string;
  energyType: number;
};
export default function index() {
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [addForm] = Form.useForm<AddFormType>();
  const [queryForm] = Form.useForm<QueryFormType>();
  const handleDetial = (item, type?: string) => {
    console.log(item, type);
  };
  const handleDelete = (item) => {
    console.log(item);
  };
  const handleSubmitQuery = () => {
    try {
      queryForm.validate();
      console.log(queryForm.getFields());
    } catch (error) {
      console.log(error);
    }
  };
  const handleSubmitAdd = async () => {
    try {
      await addForm.validate();
      console.log(addForm.getFields());
    } catch (error) {
      console.log(error);
    }
  };
  const handleImport = () => {};
  const handleReset = () => {
    queryForm.resetFields();
  };
  const handleExport = () => {};
  const handleAdd = () => {
    setVisible(true);
  };
  const columns = [
    {
      title: "日期",
      dataIndex: "date",
      fixed: "left",
    },
    {
      title: "印花用水",
      dataIndex: "print_water",
    },
    {
      title: "印花用电",
      dataIndex: "print_electricity",
    },
    {
      title: "印花用气",
      dataIndex: "print_gas",
    },
    {
      title: "染色用水",
      dataIndex: "rs_water",
    },
    {
      title: "染色用电",
      dataIndex: "rs_electricity",
    },
    {
      title: "染色用气",
      dataIndex: "rs_gas",
    },
    {
      title: "天然气",
      dataIndex: "naturalGas",
    },
    {
      title: "操作",
      fixed: "right",
      render: (_: any, item) => (
        <div className="flex justify-center items-center gap-2 text-blue-500">
          <span onClick={() => handleDetial(item)}>查看</span>
          <span onClick={() => handleDelete(item)}>删除</span>
          <span onClick={() => handleDetial(item, "edit")}>编辑</span>
        </div>
      ),
    },
  ];
  const data = [
    {
      date: "2024-01-01",
      print_water: 100,
      print_electricity: 200,
      print_gas: 300,
      rs_water: 111,
      rs_electricity: 123,
      rs_gas: 234,
      naturalGas: 400,
    },
  ];
  return (
    <div>
      <Card>
        <div className="flex">
          <Form form={queryForm} onSubmit={handleSubmitQuery}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item label="选择日期" field="date">
                  <DatePicker showTime format="YYYY-MM-DD" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="选择种类" field="energyType">
                  <Select
                    style={{ width: "200px" }}
                    options={[
                      {
                        label: "水",
                        value: 1,
                      },
                      {
                        label: "电",
                        value: 2,
                      },
                      {
                        label: "气",
                        value: 3,
                      },
                    ]}
                    placeholder="请选择能耗种类"
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Divider type="vertical" />
          <Space
            direction={"vertical"}
            className={"flex justify-center pl-5 mr-5"}
          >
            <Button
              loading={loading}
              type="primary"
              icon={<IconSearch />}
              onClick={handleSubmitQuery}
            >
              查询
            </Button>
            <Button
              loading={loading}
              type="primary"
              icon={<IconRefresh />}
              onClick={handleReset}
            >
              重制
            </Button>
          </Space>
        </div>
      </Card>
      <Space />
      <Card>
        <div className="flex mb-2">
          <div>
            <Button type="primary" icon={<IconPlus />} onClick={handleAdd}>
              添加数据
            </Button>
          </div>
          <div className="ml-2">
            <Upload action="/" />
          </div>
        </div>

        <Table scroll={{ x: 1142 }} columns={columns} data={data} />
      </Card>
      <Modal
        title="添加数据"
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={handleSubmitAdd}
        maskClosable={false}
      >
        <Form form={addForm} onSubmit={handleSubmitAdd}>
          <Form.Item
            label="日期"
            field="date"
            rules={[{ required: true, message: "请选择日期" }]}
          >
            <DatePicker
              showTime
              format="YYYY-MM-DD"
              style={{ width: "250px" }}
            />
          </Form.Item>
          <Form.Item
            label="水"
            field="water"
            rules={[{ required: true, message: "请输入水" }]}
          >
            <InputNumber style={{ width: "250px" }} placeholder="请输入水" />
          </Form.Item>
          <Form.Item
            label="电"
            field="electricity"
            rules={[{ required: true, message: "请输入电" }]}
          >
            <InputNumber style={{ width: "250px" }} placeholder="请输入电" />
          </Form.Item>
          <Form.Item
            label="气"
            field="gas"
            rules={[{ required: true, message: "请输入气" }]}
          >
            <InputNumber style={{ width: "250px" }} placeholder="请输入气" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
